<template>
  <div class="order-con">
    <div class="item-block address" v-if="!shippingTemp && showAdress && shippingType != 4" @click="handleClickOpenAddress">
      <div class="left"></div>
      <div class="right" v-if="address">
        <div class="addr">{{address.province}}{{address.city}}{{address.area?address.area:''}}{{address.town?address.town:''}}{{address.address}}</div>
        <div class="name">{{address.name}} &nbsp;&nbsp; {{address.mobile}}</div>
      </div>
      <div class="right" v-else>
        {{dingguagua_dz_is_freight? '请填写地址' :'请填写收货地址'}}
      </div>
      <span class="icon-right"></span>
      <div class="s1-borderB"></div>
    </div>
    <div :class="['item-block', 'address', shippingType==5 || 4?'self_address':'']" :style="{'marginTop': shippingType == 4 ? mat10:'0'}" @click="handleClickOpenSelfAddress" v-if="showSelfAdress">
      <div class="left icon2"></div>
      <div class="right" v-if="tmpdata.province">
        <div class="addr">
          <!-- <span v-if="shippingType == 4">{{takeTheirName}}</span>
          <span v-else>门店配送</span>地址： -->
          {{tmpdata.province}}{{tmpdata.city}}{{tmpdata.area?tmpdata.area:''}}{{tmpdata.town?tmpdata.town:''}}{{tmpdata.address}}
        </div>
        <div class="name">{{tmpdata.name}} &nbsp;&nbsp; <span v-if="storeHideMobile==0">{{tmpdata.mobile}}</span></div>
      </div>
      <div v-else>请选择{{shippingType == 4 ? '自提':'门店配送'}}地址</div>
      <span class="icon-right"></span>
      <div class="s1-borderB"></div>
    </div>
    <div :class="['item-block', 'address', shippingType==5 || 4?'self_address':'']" :style="{'marginTop': shippingType == 4 ? mat10:'0'}" @click="handleClickOpenSelfAddress" v-if="(shippingType == 4 || shippingType == 5) && !isDingWei">
      <div style="color: red">请开启手机定位，以便体验更好的服务</div>
    </div>

     <address-dialog :visible.sync="addressVisible" :dingguagua_dz_is_freight="dingguagua_dz_is_freight" @selectAddress="selectAddress" @closeClick="closeClick"></address-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import addressDialog from '@/components/addressDialog'
export default Vue.extend({
  components: {
    addressDialog
  },
  props: {
    shippingTemp: {
      type: Boolean,
      default: false
    },
    addressArr: { // 收货地址数据
      type: [Object, Array]
    },
    takeTheirName: { // 自提名字自定义
      type: String,
      default: '自提'
    },
    storeHideMobile: {
      type: Number,
      default: 0
    },
    shippingType: {
      type: String,
      default: '1'
    },
    tmpdata: { // 自提地址
      type: Object,
      default: {}
    },
    isDingWei: { // 是否开启了定位
      type: Boolean,
      default: true
    },
    dingguagua_dz_is_freight: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      mat10: '15px',
      address: null,
      showAdress: true,
      showSelfAdress: false,
      addressVisible: false
    }
  },
  mounted() {
    if (this.addressArr.length > 0) {
      this.address = this.addressArr[0]
      this.$parent.formData.address_id = this.address.address_id
      this.$parent.formData.province_id = this.address.province_id
      this.$parent.formData.area_id = this.address.area_id
      this.$parent.formData.address_id = this.address.address_id
    }
    if ((this.shippingType == 4 || this.shippingType == 5) && this.isDingWei) {
      this.showSelfAdress = true
      this.$parent.isShowSubscribe = true
    }
    if (this.shippingType == 4) {
      this.$parent.isShowSelfMobile = true
    } else {
      this.$parent.isShowSelfMobile = false
    }
  },
  watch: {
    shippingType(val) {
      this.isShowAdress()
    },
    tmpdata(val) {
      this.$parent.formData.self_address_id = val.self_address_id
    },
    isDingWei(val) {
      if ((this.shippingType == 4 || this.shippingType == 5) && val) {
        this.showSelfAdress = true
        this.$parent.isShowSubscribe = true
      }
    },
  },
  methods: {
    closeClick() {
      this.$parent.getPostFee(true)
    },
    selectAddress(data) {
      this.address = data
      this.$parent.formData.address_id = data.address_id
      this.$parent.formData.hasLatLng = !!(data.latitude && data.latitude)
      this.$parent.formData.province_id = data.province_id
      this.$parent.formData.area_id = data.area_id
      this.$parent.formData.city_id = data.city_id
      this.$parent.address_name = data.name
    },
    // 打开地址弹窗
    handleClickOpenAddress() {
      this.addressVisible = true
    },
    // 打卡自提地址弹层
    handleClickOpenSelfAddress() {
      this.$emit('openSelfAddress', this.address)
    },
    // 地址显示隐藏
    isShowAdress() {
      const type = this.shippingType
      const is_dhs_virtual = this.$parent.formData.is_dhs_virtual
      if ((type == 5 || type == 4) && this.isDingWei) {
        this.showSelfAdress = true
        // 显示运费到付
        this.$parent.isShowFreightCollect = false
        this.$parent.isShowSubscribe = true
      } else {
        this.showAdress = true
        this.showSelfAdress = false
        this.$parent.formData.self_address_id = ''
        // 显示运费到付
        this.$parent.isShowFreightCollect = true
        this.$parent.isShowSubscribe = false
      }
      if (type == 4) {
        this.$parent.isShowSelfMobile = true
      } else {
        this.$parent.isShowSelfMobile = false
      }
      if (type == 4 || is_dhs_virtual == 1) {
        if (this.$parent.hideFreightInsurance) {
          this.$parent.hideFreightInsurance()
        }
      } else {
        if (this.$parent.showFreightInsurance) {
          this.$parent.showFreightInsurance()
        }
      }
    }
  }
})
</script>

<style lang="scss">
  .order-con {
    .icon-right{
      border: solid #666;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 8px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
  }
</style>
